import './App.css';
// react-router-dom  react的路由插件
import React from 'react'
import { Link, NavLink, Route, Redirect, Switch } from 'react-router-dom'
import Home from '../../views/home/home';
import About from '../../views/about/about';
import Info from '../../views/info/info';

function App() {
  return (
    <div className='container'>
      <h1>第一个路由页面</h1>
      <div className='row'>
        {/* 导航 */}
        <ul className='col-md-3 col-sm-4 col-xs-6'>
          <li>
            {/* 引用路由组件 */}
            <Link to="/home">home</Link>
          </li>
          <li>
            {/*NavLink 类似 <NavLink>是<Link>的一个特定版本*/}
            <NavLink to="/about">about</NavLink>
          </li>
          <li>
            <Link to="/home/info">info</Link>
          </li>
        </ul>
        {/* 内容区 */}
        {/* 定义路由组件 */}
        <div className='col-md-9 col-sm-8 col-xs-6'>
          <Switch>
            <Route path='/home/info' component={Info}></Route>
            <Route path="/home" component={Home}></Route>
            <Route path="/about" component={About}></Route>
            {/* 路由重定向 */}
            {/* <Redirect to='/home'></Redirect> */}
            {/* 默认路由 */}
            <Route exact path="/" component={Home}></Route>
            {/* react中的路由是模糊匹配
            模糊匹配规则：只要是pathname以path开头就会匹配成功
            path  代表Route组件中的path属性
            pathname代表Link组件中的to 属性  location.pathname中可以获取路径
          
            在组件上添加exact属性，变成精确匹配 含义：path和pathname完全匹配时才会展示

          */}
          </Switch>
          {/* Switch组件只会渲染一个路径 ，谁先匹配成功，渲染谁*/}
          {/* 
            路由执行过程
            ① 点击Link组件中（a标签），修改了浏览器的地址栏中url
            ② react路由监听到地址栏中url的变化
            ③ React路由内部遍历所有React组件，按照路由规则进行匹配
            ④当path和pathname匹配成功之后，进行渲染
          
          
          */}
        </div>

      </div>

    </div >

  );
}


export default App;
/* 
react-router-dom
react-router  @4
react-router-dom @5
react-router-dom @6  

安装 npm i -S react-router-dom 
第一步；编写路由组件 pages或者views
第二步：父组件中注册 使用

BrowserRouter as Router  命名了别名 别名是Router 底层使用的是history.pushState()   路径上没有#
HashRouter as Router   hash值改变切换页面的，页面的路径上有#

BrowserRouter或者HashRouter包裹到App的最外层,一个页面只能用一次

Link组件相当于导航链接（a标签）
to 浏览器地址栏上的pathname 可以通过location.pathname获取该值
NavLink 类似 <NavLink>是<Link>的一个特定版本

Routes里面是放Route组件

*/